<script>
    $('.custom-workinglist-dropdown').on('click', "[data-stop-propagation]", function (e) {
        e.stopPropagation();
    });
    //stop date picker's event bubling
    $(document).on('click.dropdown touchstart.dropdown.data-api', '#ui-datepicker-div', function (e) {
        e.stopPropagation();
    });
</script>

<span id="showLeftBar" class="hideInPrint">
    <a href="javascript:dhis2.leftBar.showAnimated()" ng-attr-title="$i18n.getString('show_menu' )"><i class="fa fa-arrow-right leftBarIcon"></i></a>
</span>

<div id="leftBar">
    <d2-left-bar></d2-left-bar>
    
    <div id="orgUnitTree">
        <ul>
        </ul>
    </div>
    
    <img id="ouwt_loader" src="../images/ajax-loader-bar.gif" alt="{{'in_progress'| translate}}"/>
    
    <div class="small-horizontal-spacing" ng-if="!treeLoaded">
        {{'loading_tree'| translate}}
    </div>
</div>

<div class="page add-default-right-padding" id="mainPage">

    <!--- selected org unit begins -->
    <input type="text" selected-org-unit ng-model="selectedOrgUnit.displayName" ng-hide=true>
    <!--- selected org unit ends  -->
        
    <div ng-if="treeLoaded && !selectedOrgUnit && !loadFailed" id="loadingMetadata" class="row col-sm-12">
        <img src="../images/ajax-loader-bar.gif" alt="{{'in_progress'| translate}}"/><br>
        {{'loading_metadata'| translate}}
    </div>
    <div style="display:none" id="metadataLoadFailed" class="alert alert-danger">
        Failed to load metadata
      </div>

    <div ng-show="selectedOrgUnit && selectedOrgUnit.id">
        
        <!-- top bar begins -->
        <div class="top-bar row">        
            <div class="col-sm-12">                
                {{trackerCaptureLabel}}                
            </div>        
        </div>
        <!-- top bar ends -->

        <!--- search and registration menu begins -->        
        <div class="row">
            <!-- program selection begins -->
            <div class="col-md-4 small-vertical-spacing hideInPrint">
                <ui-select ng-model="base.selectedProgram" 
                           theme="select2" 
                           on-select="setProgram(base.selectedProgram)"
                           style="width:100%">
                    <ui-select-match allow-clear="true" 
                                     class="form-control-ui-select program-select" 
                                     ng-attr-placeholder="{{'select_or_search' | translate}}">
                        <img class="icon-program-left" ng-style="{'background-color': ($select.selected.style.color ? $select.selected.style.color : '#E0E0E0')}" ng-src="{{APIURL}}/icons/{{$select.selected.style.icon ? $select.selected.style.icon : 'clinical_fe_outline'}}/icon.svg"/>{{$select.selected.displayName  || $select.selected}}
                    </ui-select-match>
                    <ui-select-choices  repeat="program in programs | filter:{displayName:$select.search} | limitTo:maxOptionSize">
                        <span><img class="icon-program-left" ng-style="{'background-color': (program.style.color ? program.style.color : '#E0E0E0')}" ng-src="{{APIURL}}/icons/{{program.style.icon ? program.style.icon : 'clinical_fe_outline'}}/icon.svg"/><span ng-bind-html="program.displayName | highlight: $select.search"></span></span>
                    </ui-select-choices>
                </ui-select>
            </div>
        
            <div>
                <ul class="nav nav-pills small-vertical-spacing hideInPrint" style="padding-left:15px;">
                    <li ng-repeat="view in views" ng-class="{'active' : view.name === currentView.name}" ng-click="setCurrentView(view)" ng-if="!view.disabled"><a href="">{{view.name}}</a></li>
                </ul>
            </div>
        </div>
        <div class="row" ng-if="selectedProgram && !hasProgramTetAccess()">
            <br/>
            <div class="alert alert-warning">{{ 'missing_read_access_for_tracked_entity_type' | translate}} {{ selectedProgram.trackedEntityType.displayName.toLowerCase()}}</div>
        </div>
        <div class="row" ng-if="!selectedProgram || (selectedProgram && hasProgramTetAccess())">
            <div ng-repeat="view in views" ng-class="view.class" ng-include="view.template" ng-if="(view.name === currentView.name && view.shouldReset) || (!view.shouldReset && view.loaded)" ng-show="view.name === currentView.name && ((view.loaded && !view.shouldReset) || view.shouldReset)"></div>
        </div>
</div>           


